<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-layout layui-layout-admin">

    <!--顶部导航栏-->
    <div th:replace="~{commons/commons::topber}"></div>


    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>


    <div class="layui-body">
        <!-- 内容主体区域(员工表格) -->
        <div style="padding: 15px;">
            <table lay-filter="demo">
                <thead>
                <tr>
                    <th lay-data="{field:'id'}">ID</th>
                    <th lay-data="{field:'lastName'}">昵称</th>
                    <th lay-data="{field:'email'}">邮箱</th>
                    <th lay-data="{field:'gender'}">性别</th>
                    <th lay-data="{field:'department'}">部门</th>
                    <th lay-data="{field:'birth'}">生日</th>
                    <th lay-data="{field:'cz'}">操作</th>
                </tr>
                </thead>
                <tbody>
                <h2><a th:href="@{/emp}" type="button" class="layui-btn layui-btn-sm">添加</a></h2>
                <tr th:each="emp:${emps}">
                    <td th:text="${emp.getId()}"></td>
                    <td th:text="${emp.getLastName()}"></td>
                    <td th:text="${emp.getEmail()}"></td>
                    <td th:text="${emp.getGender()==0?'女':'男'}"></td>
                    <td th:text="${emp.getDepartment().getName()}"></td>
                    <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}"></td>
                    <td>
                        <a th:href="@{/emp/{id}(id=${emp.id})}" type="button" class="layui-btn layui-btn-sm layui-btn-primary">编辑</a>
                        <a th:href="@{/delEmp/{id}(id=${emp.id})}" type="button" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 底部固定区域 -->
    <div th:replace="commons/commons::footerbar"></div>

</div>


<script th:src="@{/layui.js}"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });


    });

    //table
    var table = layui.table;
    //转换静态表格
    table.init('demo', {
        height: 315 //设置高度
        , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        //支持所有基础参数
    });
</script>

</body>
</html>